<template>
  <div class="fluctuantContent">
    <div class="top">
      <p>半年内消费趋势幅度 :</p>
    </div>
    <div class="charts" ref="fluctuant"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, defineProps, watch } from 'vue'
import * as echarts from 'echarts'

const props = withDefaults(
  defineProps<{
    fluctuantList: any
  }>(),
  {
    fluctuantList: []
  }
)

const fluctuantNameList = ref([])
const fluctuantValueList = ref([])

const fluctuant = ref()

const mkCharts = () => {
  const myCharts = echarts.init(fluctuant.value)
  const option = {
    grid: {
      top: '10%',
      left: '10%',
      right: '10%',
      bottom: '10%',
    },
    xAxis: {
      type: 'category',
      boundaryGap: false, // 两侧不留白
      splitLine: {
        show: false,
      },
      data: fluctuantNameList.value,
    },
    yAxis: {
      splitLine: {
        show: false,
      },
      axisLine: {
        show: false, // 轴线
      },
      axisTick: {
        show: true, // 刻度
      },
    },
    series: {
      type: 'line',
      data: fluctuantValueList.value,
      smooth: true,
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 0.9,
          colorStops: [{
            offset: 0.1, color: 'rgba(74, 27, 27)',
            // offset: 0.8, color: 'rgba(239, 228, 182, 0.9)'
          }, {
            offset: 0.8, color: 'rgba(116, 51, 51)'
            // offset: 0.8, color: 'rgba(239, 228, 182, 0.88)'
          }],
          global: false,
        },
      },
      lineStyle: {
        // color: 'rgba(74, 27, 27)'
        color:'rgba(239, 228, 182)',
      },
    },
  }
  myCharts.setOption(option)
}

watch(props, () => {
  if (props.fluctuantList) {
    props.fluctuantList.forEach((item: any) => {
      if (item.month) {
        fluctuantNameList.value.push(item.month)
        fluctuantValueList.value.push(item.value)
      }
    })
    mkCharts()
  }
})

onMounted(() => {
  // mkCharts()
})


</script>

<style lang="scss" scoped>
.fluctuantContent {
  width: 100%;
  height: 100%;
  margin-top: 20px;
  padding-right: 10px;

  .top {
    margin-bottom: 30px;

    p {
      color: #fbefb8;
      font-size: 30px;
      font-weight: 500;
    }
  }

  .charts {
    // background: #2c1413;
    // opacity: 0.6;
    width: 100%;
    height: 340px;
  }
}
</style>